<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转风车-牌坊-正方体</title>
		<link rel="icon" type="text/css" href="img/icon.ico"/>
	</head>
	<body>
		<!--旋转正方体-->
		<style type="text/css">
			
			/*transform-style 设置元素出于3d空间还是平面
				默认值flat: 指定元素的子元素位于平面
				preserve-3d: 指定元素的子元素位于3d空间内
				*/
			/*body{
				padding-top: 50px;
				padding-left: 200px;
			}*/
			
			.box{
				width: 100px;
				height: 100px;
				position: relative;
				text-align: center;
				margin-top: 250px;
				margin-left: 100px;
				float: left;
				/*perspective: 300px;*/
				transition: all 2s;
				transform-style: preserve-3d;
				
				
			}
			/*.box div{
				backface-visibility: 设置元素背面是否可见
				backface-visibility: hidden;
			}*/
			.front{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: rgba(0,0,0,.2);
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(100px);
			}
			.back{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: rgba(10,115,105,.2);
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(0px) rotateY(180deg);
			}
			.left{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: rgba(70,20,180,.2);
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(50px) translateX(-50px) rotateY(-90deg);
			}
			.right{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: rgba(125,10,80,.2);
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(50px) translateX(50px) rotateY(90deg);
			}
			.top{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: rgba(250,110,10,.2);
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(50px) translateY(-50px) rotateX(90deg);
			}
			.bottom{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: rgba(119,250,18,.2);
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(50px) translateY(50px) rotateX(-90deg);
			}
			.box:hover{
				transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg)  ;								
			}
		</style>
		
		<div class="box">
			<div class="front">前</div>
			<div class="back">后</div>
			<div class="left">左</div>
			<div class="right">右</div>
			<div class="top">上</div>
			<div class="bottom">下</div>
		</div>
		
		<!--旋转风车-->
		<style type="text/css">
			/*body{
				padding-top: 50%;
				padding-left: 50%;
			}*/

			.winnowerBox div{
				transform-origin:0% 100%;
			}
			.winnowerBox{
				width: 300px;
				height: 300px;
				/*background: pink;*/
				position: relative;
				text-align: center;
				margin-top: 150px;
				margin-left: 400px;
				float: left;
				/*perspective: 300px;*/
				transition: all 5s;
				transform-style: preserve-3d;
				transform-origin:0% 50%;
				
			}
			.winnower01{
				width: 0;
				height: 0;
				border-left: 80px solid green;
				border-bottom: 150px solid transparent;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateZ(60deg);
				box-shadow: 0 0 12px deepskyblue;
			
			}
			.winnower02{
				width: 0;
				height: 0;
				border-left: 80px solid orange;
				border-bottom: 150px solid transparent;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateZ(120deg);
				box-shadow: 0 0 12px hotpink;
			
			}
			.winnower03{
				width: 0;
				height: 0;
				border-left: 80px solid yellow;
				border-bottom: 150px solid transparent;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateZ(180deg);
				box-shadow: 0 0 12px deepskyblue;
			
			}
			.winnower04{
				width: 0;
				height: 0;
				border-left: 80px solid lawngreen;
				border-bottom: 150px solid transparent;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateZ(240deg);
				box-shadow: 0 0 12px hotpink;
				
			}
			.winnower05{
				width: 0;
				height: 0;
				border-left: 80px solid lightskyblue;
				border-bottom: 150px solid transparent;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateZ(300deg);
				box-shadow: 0 0 12px deepskyblue;
				
			}
			.winnower06{
				width: 0;
				height: 0;
				border-left: 80px solid mediumpurple;
				border-bottom: 150px solid transparent;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateZ(360deg);
				box-shadow: 0 0 12px hotpink;
			
			}
			.winnowerBox:hover{
				transform: rotateZ(3600deg);
			}			
		</style>
		
		
		<div class="winnowerBox">
			<div class="winnower01">青</div>
			<div class="winnower02">橙</div>
			<div class="winnower03">黄</div>
			<div class="winnower04">绿</div>
			<div class="winnower05">蓝</div>
			<div class="winnower06">紫</div>
		</div>
		
		<!--旋转牌坊-->
		<style type="text/css">
			.signBox{
				width: 300px;
				height: 300px;
				margin-top: 250px;
				margin-left: 50px;
				float: left;
				/*padding-top:200px ;*/
				perspective: 350px;	
			}
			.sign{
				width: 300px;
				height: 100px;
				background: pink;				
				transition: all 1s;
				
			}
			.sign:hover{
				transform: rotateY(360deg);	
				background: aqua;
				/*transform: scaleY(2);*/
			}
			.sign{
				text-align: center;
				line-height: 100px;
			}
		</style>
		<div class="signBox">	
			<div class="sign">
				<span>云破日出，你是那道光束！</span>
			</div>
		</div>
	</body>
</html>
